<script setup lang="ts">
import type { MovieReqVO, PageMovieReqVO, PageMovieRespVO} from "@/interface/movie.ts"
import {onMounted, reactive, ref} from "vue"
import {Page} from "@/interface/base.ts"
import Breadcrumb from "@/components/breadcrumb/Breadcrumb.vue";
import {useMovieAddApi, useMovieEditApi, useMovieTypeSelectListApi, usePageMovieApi} from "@/services/api";
import AutoForm from "@/components/auto-form/AutoForm.vue";
import type {AutoFormItem} from "@/interface/auto-form.ts";
import {cloneDeep} from "lodash";


const dialogVisible = ref(false)
const title = ref("")
const addModel= ref<Record<string, AutoFormItem> >({})
const model = ref<Record<string, AutoFormItem>>({})
const pageMovieReq: PageMovieReqVO = reactive({
  size: 10,
  current: 1
})
const movieTableData = ref<Page<PageMovieRespVO>>({
  list: [],
  total: 0
})
/**
 * 数据请求方法
 */
const loadData = async () => {
  const {data:res} = await usePageMovieApi(pageMovieReq)
  movieTableData.value = res
}
const init = async ()=>{
  const {data:movieTypeSelectList} = await useMovieTypeSelectListApi()
  addModel.value = {
    chineseName: {
      key: "chineseName",
      name: "片名",
      value: "",
      itemType: "input",
      placeholder: "请输入片名",
      rules: {
        required: true,
        message: '请输入片名',
        trigger: 'blur'
      }
    },
    englishName: {
      key: "englishName",
      name: "外文名",
      value: "",
      itemType: "input",
      placeholder: "请输入外文名",
      rules: {
        required: true,
        message:
            '请输入外文名',
        trigger:
            'blur'
      }
    },
    type: {
      key: "type",
      name: "类型",
      value: "",
      itemType: "select",
      placeholder: "请输入类型",
      options: movieTypeSelectList,
      rules: {
        required: true,
        message: '请选择类型',
        trigger: 'blur'
      }
    },
    score: {
      key: "score",
      name: "评分",
      value: "",
      itemType: "input",
      placeholder: "请输入评分",
      rules: {
        required: true,
        message: '请输入影片评分',
        trigger: 'blur'
      }
    },
    actors: {
      key: "actors",
      name: "主演",
      value: "",
      itemType: "input",
      placeholder: "请输入主演",
      rules: {
        required: true,
        message: '请输入影片主演',
        trigger: 'blur'
      }
    },
    movieLanguage: {
      key: "movieLanguage",
      name: "语言",
      value: "",
      itemType: "select",
      placeholder: "请输入语言",
      options: [
        {
          label: "中文",
          value: "中文",
        },
        {
          label: "英文",
          value: "英文",
        }
      ],
      rules: {
        required: true,
        message: '请选择语言',
        trigger: 'blur'
      }
    },
    duration: {
      key: "duration",
      name: "时长",
      value: "",
      itemType: "input",
      placeholder: "请输入时长",
      rules: {
        required: true,
        message: '请输入影片时长',
        trigger: 'blur'
      }
    },
    releaseTime: {
      key: "releaseTime",
      name: "上映时间",
      value: "",
      itemType: "date",
      placeholder: "请选择上映时间",
      options: {
        type: "datetime",
        valueFormat: "YYYY-MM-DD HH:mm:ss"
      },
      rules: {
        required: true,
        message: '请选择上映时间',
        trigger: 'blur'
      }
    },
    isSell: {
      key: "isSell",
      name: "是否售卖",
      value: 0,
      itemType: "radio",
      options: [
        {
          label: "是",
          value: 1
        },
        {
          label: "否",
          value: 0
        }
      ],
      rules: {
        required: true,
        message: '请选择是否售卖',
        trigger: 'blur'
      }
    },
    images: {
      key: "images",
      name: "图片",
      value: "",
      itemType: "image",
      rules: {
        required: true,
        message: '请上传图片',
        trigger: 'blur'
      }
    }
  }
  model.value = cloneDeep(addModel.value)
}
/**
 * 处理影片添加操作
 */
const handleAdd = () => {
  title.value = "新增"
  model.value = {}
  model.value = cloneDeep(addModel.value)
  dialogVisible.value = true
}

/**
 * 处理影片编辑操作操作
 */
const handleEdit = (row:MovieReqVO) => {
  title.value = "编辑"
  model.value.id = {
    key: "id",
    name: "id",
    value: "",
    itemType: 'none'
  }
  Object.keys(model.value).forEach(key=>{
    model.value[key].value = row[key]
  })
  dialogVisible.value = true
}
const handleSearch = () => {
  loadData()
}
const handleSizeChange = () => {
  pageMovieReq.current = 1
  loadData()
}
const handleCurrentChange = (val: number) => {
  pageMovieReq.current = val
  loadData()
}
const onSubmit = async (data:MovieReqVO) => {
  if(data.id){
    await useMovieEditApi(data)
    await loadData()
  }else{
    await useMovieAddApi(data)
    await loadData()
  }
  dialogVisible.value = false
}
const onCancel = () => {
  dialogVisible.value = false
}
const handleUpload = (url:string) => {
  model.value.images.value = url
}
onMounted(async ()=>{
  await init()
  await loadData()
})
</script>

<template>
  <div class="container">
    <div class="breadcrumb">
      <breadcrumb></breadcrumb>
    </div>
    <div class="search">
      <el-form :inline="true" :model="pageMovieReq" class="demo-form-inline">
        <el-form-item label="片名">
          <el-input v-model="pageMovieReq.chineseName" placeholder="请输入片名" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="movieTableData.list" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="60"/>
        <el-table-column prop="chineseName" label="片名" width="180"/>
        <el-table-column prop="englishName" label="外文片名" width="240"/>
        <el-table-column prop="typeName" label="类型" width="60"/>
        <el-table-column prop="score" label="评分" width="60"/>
        <el-table-column prop="actors" label="主演" width="310"/>
        <el-table-column prop="movieLanguage" label="语言" width="60"/>
        <el-table-column prop="releaseTime" label="上映时间" width="180"/>
        <el-table-column prop="isDel" label="是否删除" width="90">
          <template #default="scope">
            <el-tag
                :type="scope.row.isDel == 1 ? 'success' : 'danger'"
            >
              {{scope.row.isDel == 1 ? "是" : "否"}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isSell" label="是否售卖" width="90">
          <template #default="scope">
            <el-tag
                :type="scope.row.isSell == 1 ? 'success' : 'danger'"
            >
              {{scope.row.isSell == 1 ? "是" : "否"}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #header>
            <el-button link type="primary" size="large" @click="handleAdd">
              新增
            </el-button>
          </template>
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          v-model:current-page="pageMovieReq.current"
          v-model:page-size="pageMovieReq.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="movieTableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <auto-form :title="title" :dialog-visible="dialogVisible" :model="model" @onSubmit="onSubmit" @onCancel="onCancel" @handle-upload="handleUpload"></auto-form>
  </div>
</template>

<style scoped>
.container {
  flex: 1;
  background-color: #fdfdfd;
  padding: 20px;
}

.search {
  padding: 10px;
}

.pagination {
  padding: 20px;
}


</style>